<template>
  <div class="mainbBg" style="height: 100%; background-color: #ededed">
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert">{{ alertText }}</alert>
    </div>
    <div style="height: 100%; background-color: #ededed; margin: 0 15px"></div>
    <div class="last_record_box" style="padding-top: 10px">
      <div
        style="margin-left: 15px; color: grey; border: 0; margin-bottom: 5px"
      >
        正在填写{{ reportDate }}的日报
      </div>
      <x-switch title="补填昨天日报?" v-model="doneReportYesterday"></x-switch>
    </div>

    <editInfo
      class="editInfo-wrap"
      :reportItems.sync="reportItems"
      addPlaceHolder="添加分工"
    >
      <template slot="chooseItem">
        <div class="slotWrap">
          <div class="text-info">
            <popup-radio
              class="popupradio-custom"
              :title="!typeSelected ? '标签' : ''"
              text-align="center"
              :options="types"
              v-model="typeSelected"
              @on-show="onShowTags"
            ></popup-radio>
            <div class="time">
              <x-input
                class="start-time"
                :value="reportItems[index]"
                placeholder="00:00"
                mask="99:99"
                :is-type="checkTimeFormat"
                @blur="checkTime"
                :show-clear="false"
              />
              <span>--</span>
              <x-input
                class="end-time"
                :value="reportItems[index]"
                placeholder="00:00"
                mask="99:99"
                :is-type="checkTimeFormat"
                @blur="checkTime"
                :show-clear="false"
              />
            </div>
          </div>
          <div class="progressDiv">
            <c-progress
              class="c-progress"
              :percent.sync="progress"
              :initProgress="initProgress"
              type="success"
              :width="getWidth()"
            />
          </div>
        </div>
      </template>
    </editInfo>
  </div>
</template>

<script>
import {
  XHeader,
  XInput,
  XSwitch,
  Confirm,
  XProgress,
  XTextarea,
  PopupRadio,
  XButton,
  XAddress,
} from "vux";
import { mapState } from "Vuex";
import time from "utilMethods/time.js";
import tags from "api/tag";
import editInfo from "components/EditInfo/editInfo";
import CProgress from "components/Progress/progress";

export default {
  name: "CreateDayReport",
  props: ["isReallyModifyContentDay"],
  components: {
    XHeader,
    XInput,
    XTextarea,
    PopupRadio,
    XButton,
    XAddress,
    XSwitch,
    Confirm,
    XProgress,
    editInfo,
    CProgress,
  },
  data() {
    return {
      reportDate: "",
      doneReportYesterday: false,
      reportItems: [
        {
          index: 0,
          startTime: "",
          endTime: "",
          content: "",
        },
        {
          index: 1,
          startTime: "",
          endTime: "",
          content: "",
        },
        {
          index: 2,
          startTime: "",
          endTime: "",
          content: "",
        },
      ], //用来存填写的日报内容
      typeSelected: null, // 这个是id
      typeSelectedItem: {}, // 这个是选择的整个tag信息
    };
  },
  computed: {
    ...mapState(["allBacklog", "modifyContentDay"]),
    today() {
      return time.getCurrentDay();
    },
    yesterday() {
      return time.getSomeDay(this.today, -1);
    },
    types() {
      const { allBacklog } = this;
      const arr = [];
      let temp;
      temp = {
        key: 0,
        value: "学习",
      };
      arr.push(temp);
      temp = {
        key: -2,
        value: "休息",
      };
      arr.push(temp);
      if (!allBacklog) {
        return;
      }
      allBacklog.forEach((element) => {
        if (element.hasOwnProperty("projectId")) {
          temp = {
            key: element.projectId,
            value: element.title,
            isProject: true,
            progress: element.progress,
          };
        } else {
          temp = {
            key: element.id,
            value: element.name,
            isProject: false,
          };
        }
        arr.push(temp);
      });
      return arr;
    },
  },
  watch: {
    doneReportYesterday(newVal) {
      if (newVal) {
        this.reportDate = this.yesterday;
      } else {
        this.reportDate = this.today;
      }
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    getWidth() {
      const clientWidth = document.body.clientWidth;
      return clientWidth * 0.7;
    },
    init() {
      // 时间初始化
      this.getRepoDayInit();
      // 显示标签
      this.onShowTags();
    },
    getRepoDayInit() {
      if (new Date().getHours() < 9) {
        this.reportDate = this.yesterday;
        this.doneReportYesterday = true;
      } else {
        this.reportDate = this.today;
      }
    },
    // 检查输入的时间是否格式正确
    checkTimeFormat(value) {
      // let reg = /^([01][0-9]|[2][0-3])[0-5][0-9]$/;
      let reg = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/;
      if (reg.test(value)) {
        return { valid: true };
      } else {
        return { valid: false, msg: "格式错误" };
      }
    },
    addReportItem() {
      const temp = {
        index: this.reportItems.length,
        startTime: "",
        endTime: "",
        content: "",
      };
      this.reportItems.push(temp);
    },
    deleteReportItem(item) {
      // 删除item,要保证删除后的item中的index对得上号
      let length = this.reportItems.length;
      for (let i = length - 1; i >= 0; --i) {
        let index = this.reportItems[i].index;
        if (item.index === index) {
          this.reportItems.splice(item.index, 1);
        } else if (item.index < index) {
          this.reportItems[i].index--;
        }
      }
    },

    
    // 获取标签
    async onShowTags() {
      const result = await tags.getAllTag();
      if (result.code === 0) {
        this.showAlert("获取【标签】失败");
      } else if (result.code === 1) {
        let arr = [];
        if (result.data.projectTags) {
          arr = arr.concat(result.data.projectTags);
        }
        arr = arr.concat(result.data.userTags);
        this.$store.commit("recordAllBacklog", arr);
      }
      this.changeColor();
    },
    changeColor() {
      let tempNode = document.getElementsByClassName("weui-cells_radio");
      let children = tempNode[0].childNodes;
      for (let i = 0; i < children.length; ++i) {
        if (this.types[i] !== undefined) {
          if (!this.types[i].hasOwnProperty("isProject")) {
          } else if (this.types[i].isProject) {
            if (children[i].style !== undefined) {
              children[i].style.backgroundColor = "rgba(68,197,172,.2)";
            }
          } else {
            if (children[i].style !== undefined) {
              children[i].style.backgroundColor = "rgba(229,71,103,.2)";
            }
          }
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.editInfo-wrap {
  .slotWrap {
    display: flex;
    flex-direction: column;
    .text-info {
      display: flex;
      justify-content: space-between;
      max-height: 67px;
      .popupradio-custom {
        min-width: 30%;
      }
      .time {
        display: flex;
        .start-time {
          text-align: center;
        }
        span {
          line-height: 67px;
          overflow: hidden;
          min-width: 15px;
        }
        .end-time {
          text-align: center;
        }
      }
    }
    .progressDiv {
      margin-left: 15px;
      margin-bottom: 10px;
      .group {
        div {
          display: flex;
          .input {
            border: 1px solid gray;
            padding: 0;
          }
        }
        margin-bottom: 10px;
      }
    }
  }
}
</style>